Get data dari firebase 


A 5. Get Data.mp4 - VLC media player — x 
Media Playback Audio Video Subtitle Tools View Help 


â firebase.google.com ry-data/g t Cg x *D Cr) i 


Iu Firebase Products ~ Use Cases Docs - More x Q Search @ English ~ Go to console : © 


Firebase Documentation 


Overview Fundamentals v Release & Monitor v Engage v Reference Samples 


= On this page 
Check out what's new from Firebase at Google I/O 2022. Learn more Example data 
Get a document 


Source Options 
Fire 


his helpful? 19 Gp Custom objects 


Get multiple 
Get data with Cloud Firestore A Send feedback jeda 


+, Recommendations 


Get data once 


Listen for realtime updates There are two ways to retrieve data stored in tarted with 
ed v 


Firestore 


Cloud Firestore. Either of these methods can 
be used with documents, collections of 


documents, or the results of queries: a data 


e Call a method to get the data 


querying — 


Manage indexe: e Seta listener to receive data-change work? Shae ala, 
« events ae 7 
ARE RNR a ews ee P nenek M 
00:06 © 14:09 
HE) mela lw Sisik D | 
Tinggal ambil data dari firebase kita 
A 5. Get Data.mp4 - VLC media player — x 


Media Playback Audio Video Subtitle Tools View Help 
& Get i x b x TEE 


© C D @ console firebase.google.com j 


o 9 Maps @ IN VP. Bg situ 1 @ 
Firebase myapp-firebase ~ Cloud Firestore 
ft Project Overview 2 
ft 
3 e Z] 
Authentication 
App Check + Start collection + Add document + Start collection 
users > + Add field 
Realtime Database 
% Extensions Kx3EolxsYkA1yOybNSPT 
& Storage H 
ac 
@ Hosting 
() Functions 
€) Machine Learning 
Beoe x.» ~— AGEDMAW 22 | 


00:22 — 
MH rela Claw SISI 


Caranya ada 2 

Bisa diambil sekali Ketika dijalan kan 

Dan jalankan lagi Ketika aplikasi nya di restart 
Itu pakai dgn get 

Kedua pakai real time 

Dia datanya harus di pantau 


Misal kan ada perubhan datanya otomatis berubah tanpa di restart 
Pertama bahas pertama 


Buat providers user 
Buat function getUsers 


A 5. Get Data.mp4 - VLC media player 
Media Playback Audio Video Subtitle Tools View Help 


FIREBASE APP 
B dartt 


OUTLINE 
TIMELINE 


DEPENDENCIES 


01:52 


1 Rp a Fs 0 2a“ 
Sebenar simple untuk membuat getUser 

Panggil user collection 

Harus pakai asycn 

Sperti ini pangil users nya 

Cukup seperti ini 


A 5. Get Data.mp4 - VLC media player — x 
Media Playback Audio Video Subtitle Tools View Help 
Selection View € Terminal Help se firebase app - Visual Studio 
£ © usersdart X 
FIREBASE APP 
M dart to lastnameC.clear(); 
sana ageC.clear(); 
} else { 


Name 


Future<void> getUsers() asyr 


CollectionRef 2 users = db.collection( 


users.get(); 


Name 


ns-dependenci PROBLEMS Y 7 3 x Name 


Da 1 


k Name 
D Avoid ‘print’ calls in production code. : 


analysis options.yaml 
fireb mi 
OUTUNE 
> TIMELINE 
DEPENDENCIES 


02:42 
TE) KI DI 


1 


~ 


Ini syntax untuk menget data 
Nanti kita pakai snapshoot untuk di future nya 


A 5. Get Data.mp4 - VLC media player — x 


Media Playback Audio Video Subtitle Tools View Help 


Terminal Help user firebase_app - Visual Studio Code Ogog|as 


& © usersdart X 


FIREBASE APP t E ( [ 
ma dart to p 


options)) N 


id 
» Type: Future<QuerySnapshot<Object?>> 
Function([GetOptions?]) 
package:cloud_firestore/cloud_firestore.dart 


Fetch the documents for this query 
© users.dart 


@ screen 


v To modify how the query is fetched, the [options] parameter Name 
@ add usersdart can be provided with a [GetOptions] instance. 


© users screen.dart users.get(); 


Name 


indo 
flutter-plugin 


flutter-plugins-dependencies PROBLEMS 


Name 


d 1 
Prefe t with c 


© add usersdart 


Don't import implementation files from another package 


Name 


OUTLINE 
TIMELINE 

he import of 'packagerflutter/src/foundation/key.dart' is unne 
DEPENDENCIES 


~ A&G 8 @ ad 0230 


02:57 
TE) Ke att 


Ini copy paste ganti void nya 
Asycn dihpaus lalu kasih return 


A 5. Get Data.mp4 - VLC media player 


Media Playback Audio Video Subtitle Tools View Help 


Run Terminal 


X 


FIREBASE APP 


Help us f pp - Visual Studi 


© usersdart X 


i 


= t tool lastnameC.clear(); 


ageC.clear(); 
} else { 
print 


} 


Future<Query 


hot<Object?>> getUsers() 
users = db.collection( 


Collectior ce 


return users.get(); 


PROBLEMS 


oid ‘print’ calls in production code. 


OUTLINE 
TIMELINE 
DEPENDENCIES 


— AGEMEH A MN 


TE) el Cait SSM 

Function ini akan menreturn datanya 
Kemudian data nya tingal dahulu 

Masuk ke layar 

List view di bungkus widget dgn future builder 
Buat snapshoot nya 

Dia akan mereturn dari snapshot 


Ini import saja 
A 5. Get Data.mp4 - VLC media player — x 


Media Playback Audio Video Subtitle Tools View Help 


File Edit Selection View Run Terminal Help 


app - Visual Studio Code OGg 8 - 
Q £ 
FIREBASE_APP 
= rt toc 


appBar: 
title: 
> 
27 body: Future der<QuerySnapshot< 
snapsñot 
builder 


8 


Import library 'package:cloud firestore/cloud firestore.dart'" 
hot 
context, index 
tTile 


ext ( 


B @a eo > SAG 


Name 


OUTLINE 
TIMELINE 


DEPENDENCIES 


B8M 420 e222 MD 


04:20 


TE) Ke Hn HAE 


Data ini masuk snapshoot 


Biasa nya snapshoot hanya untuk mengecek coneksi 
Sekarang isinya data akan menreturn future builde 
Ketika kita print snapshoot . data 

Ini kita lihat di debug console nya masih null 


A 5. Get Data.mp4 - VLC media player 
Media Playback Audio Video Subtitle Tools View Help 
Run Terminal Help users screen dart - fire p - Visual Studio Cod 
« & users screendart X © 
FIREBASE APP 


En dato child: Icor 


appBar: 
title 


«OuerySnapshot«Object?»» (builder: 


context, snapshot 
print(snapshot.data) ; 


Listv - builder 
itemCount: P 
itemBuilder: (context, index 
etu ListTile( 
titl Text( 
subtitle: Text( 


stats: avg=10718.48ms min=10718.48ms max=10718.48ms 


count=1 


OUTUNE 
) TIMELINE 
DEPENDENCIES 


26. - € BNI... D aa | 
05:13 14:09 


Lupa kasih future nya kita pangil 
Karena providers nya belum ad akita pangil di tambahData di copy saja 


A 5. Get Data.mp4 - VLC media player 
Media Playback Audio Video Subtitle Tools View Help 
Run Terminal Help a rs.dar Visual St OGg 8: 


© Gaddusersdart X & 


FIREBASE_APP 
MM dart to 


@override 
Widget build(E 
Users users 
return Scaf 
appBar 
title: 


body: Pa 
padding: 
child: 
children: 
TextF 


s.dart 


lugin registr 


controller: users.firstnameC, 


decoration: Inp tion 
border: OutlineInp der(), 
29 DEBUG CONSOL 


ted application 
avg=10718.48ms min=10718.48ms max=10718.48ms 


I/flutter ( 


Reloaded 1 


fire 


OUTLINE D/EGL emula 


TIMELINE nt=1 


DEPENDENCIES 


8 a ad s F 
05:36 14:09 


t 
lot 
r 
9 
(Di 
B 
B 
6 
Y 
d 
@ 


M rim Tim Fs 


paste 


A 5. Get Data.mp4 - VLC media player — x 


Media Playback Audio Video Subtitle Tools View Help 


Edit Selection View Terminal Help 


è 
FIREBASE APP & 
B dart to mpor 
mpor 
imp 
imp 


mpor 


? key)) : su Name 


@override 
Widget build(BuildContext context) 
sers users = Provider.of< >(context) 5 
return Scaffold( 
floatingActionButton: 


onPressed: 


Name 


ator.push( 


ns-dependencies D PERUGCON - x Name 


Restarted application 
flutter ( 5979 Name 
D/EGL emulation( 5979): app time stats: avg=10718.48ms min=10718.48ms max-10718.48ms 
ntz1 
Name 
flutter 
Reloaded 1 of 647 li 


ounen D/EGL emulation( 5979 


TIMELINE nts1 


DEPENDENCIES 


— AGEMAH 3D B® 
05:45 14:09 
DE) ee) mt Cate) SIS 


jadi users dari getUser 


A 5. Get Data.mp4 - VLC media player — x 
Media Playback Audio Video 


Subtitle Tools View Help 


Selection View Run Terminal Help sers_screendart - fi 


FIREBASE APP 
M dart to 


, 
child: 
, 
appBa 
title: 


Name 


body: FutureBuilder<QuerySr t<Object?>> 
future: users.getUsers(), reme 
builder: (context, snapshot) { 
print(snapshot.data); 
ListView.builder( 
itemCount: 10, 
itemBuilder: (context, index 
turn ListTile( 
title: T 
subtitle 


Name 


(© flutter-plugins-dependencies 28 DEBUG CONSOLE 


W/ProviderInstall 5979 led to load providerins e: No acceptable mo Name 


dule com.google.android.gms.providerinstaller.dynamite fo ersion is @ and 


remote vers ' 
Name 
Reloaded 1 of 647 li 


D/EGL_emulation( 5 s yg=3 57ms 281.57ms max=38281.57ms 
OUTLINE mnta 


TIMELINE I/flutter ( 5979): DMa onquerySnapshot 


DEPENDENCIES 


— AGBEWMAYW OB | 
06:00 14:09 


WE) Ke DU SIS 
Maka di return maka sudah ada sudah dapat datanya 


Kalau kita panggil lagi docs maka akan memangil documentnya coba tampilkan yg 
0 


A 5. Get Data.mp4 - VLC media player — x 


Media Playback Audio Video Subtitle Tools View Help 


Run Terminal Help 


« © users. screendart X * 206 
FIREBASE APP 


MB dart tool appBar: 


title: Tex Go to doc 


, 
body: Futur 
future: users.get 
builder: (context, snapshot) ( 
print(snapshot.data!.docs(@).data())); 
ListVie lder( 
itemCoun 
itemBuilder context, index 
eturn List 
title: Te: 
subtitle: 


28) = DEBUG 
I/flutter ( 59 


D/EGL_emulation( 59 y 26m 71.68ms max-7002.45ms count 


I/flutter ( 5979): { t ta, , lastname: data) 


Reloaded 1 of 64 
I/flutter ( 5979): (firstname: Data, a lastname: data) 
oa emulation( 5979): app_time_stats: avg=13494.87ms min=1 87ms max=13494.87ms 
TIMELINE nt=1 


DEPENDENCIES 


gone» eC 4 Bmeoe 4 » l ee ae oe 
06:54 14:09 


Sudah dapat data pertama sudah terhubung dgn datanya 

Lalu print dikomentar kita bungkus dalam list 

Buar var data snapshoot. Data!.docs; kita simpan variabel data 
Sekarang item couynt ganti data.lengt 

Seharusnya data nya da 6 


A 5. Get Data.mp4 - VLC media player — x 
Media Playback Audio Video Subtitle Tools View Help 


& users_screen.dart X 
FIREBASE APP L j 


MM dart to: appBar: 


title: 
, 
body: FutureBuil 
future: users.ge 
builder: (context, snapshot) { 


ar data = snapshot.data!.docs; 
1 Lis 5 
itemCount: data.length, 
itemBuilder: (context, index) ( 
etur List 
title: Te 
subtitle: 


DEBUG € 


rstname: Data, age: 12, lastname 
app_time_stats: avg=13494 


OUTLINE 2518.95ms m: 


TIMELINE 


DEPENDENCIES 


PA. Cc € Aso e@> » - AGEMAHW os | 


07:57 
Ih Ke DU Sisik 


Sekarang tingal masuk ke listview builder 
Kita pecahkan dahulu menjadi user 
Data[index].data() 


Data ini tipenya kita print maka dia maping 
Kita ubah as menjadi Map<String, dynamic> 
Jadi user bentuk nya map 

Kita tampilkan 

User nya firstname 

Maka sudah ada 


A 5. Get Data.mp4 - VLC media player 
Media Playback Audio Video Subtitle Tools 


ase app - Visua Co Daan 


users screen.dart X 


subtitle: 


OUTLINE 
TIMELINE 


DEPENDENCIES 


- AGBEMAYH AT | 


> m] Cte) SS 

Yg ksong kita delete document 
Sekarang di restart 

Atau kasih async di butuh await 


0 


A 5. Get Data.mp4 - VLC media player 


Media Playback Audio Video Subtitle Tools View Help 


Run Terminal Help 


FIREBASE APP 
M dart_to 


25 


OUTLINE 
> TIMELINE 
DEPENDENCIES 


CollectionRe ence users 


return 


OOo: 


) - Visual St 


& users.dart X 


ageC.clear(); 


) els 


print 


<Obje getUse 


db.collection( 
it users.get(); 


DEBUG CONSOLE 


Performing hot restart 


10:17 


Di) im) Coit SISI 


Dia karna perbandingan dia return dahulu kita perbandingan kita cut dahulu 


Kalau data sudah selesai 


A 5. Get Data.mp4 - VLC media player 


Media Playback Audio Video Subtitle Tools View Help 


File Edit Selection View Run Terminal Help 


Oi & 
FIREBASE APP 
MB dart too 


26 


elided 11 frames from class 
async-patch 


OUTLINE 
TIMELINE 


DEPENDENCIES 


D/EGL emulat 


appBar: 
title: 


, 
body: Futur ) 
future: users.getUsers( 
builder: (context, snapshot) 


var data = snapshot.data!.docs; 


(snapshot.connectionState == 


necti tate.done) { 


DEBUG CONSOLE 


RawReceivePortImpl, class 


^a § @ ZW 0239 


11:02 


Woke mt Com SISI 


Maka di akan return paste 


Kalau belum selesai kita return indicator seperti biasa loading 


A 5. Get Data.mp4 - VLC media player 


Media Playback Audio Video Subtitle Tools View Help 


Edit Run Terminal 


X 


Selection View Go Help 


FIREBASE APP 
MM dart to f 


@ screen 
& add u: 


users screen.dart 


s.dart 


etu 


c 


27) DEBUG CONSOLE 


sided 11 trame 


patch 


Reloaded 1 of 647 braries 


Si D/EGL_emulation( 5979) 


TIMELINE nt=1 


DEPENDENCIES 


app_time_stats 


(snapshot.connectionState 


St >.done) { 
ListView.builder 


Aam. data 


CircularProgressIndicator({Key? key, 
double? value, Color? backgroundColor, 


Tanath 


Color? color, Animation<Color?>? 
valueColor, double strokeWidth 
String? semanticsLabel, String? 
semanticsValue}) 


Creates a circular progress indicator. 


an either be null for an 
ndicator, or a non-null value 


The [value] argurr 
indeterminate progre 


ild: CircularProgressIndicator 


in 807ms 


avg=81292.82ms min= 2.82ms max=81292.82ms 


4 


^ BBm 4 0239 


x 


11:21 


BE) Ke III 
Maka tida eror 


Ini masih muncul di debug 


Kita ganti connection menjadi hashdata 


A 5. Get Data.mp4 - VLC media player 


Media Playback Audio Video Subtitle Tools View Help 


Edit Selection View Go Run Terminal screen.dart - fi 


base app - Visual Studio Cod 


& & users screendart X © 


FIREBASE APP 


dart toc 34 
i ( 


indows 
flutter-plu 


flute ncies 27) DEBUG CONSOLE 


yami 


OUTLINE 


TIMELINE 


DEPENDENCIES 


snapshot.hasData) { 
stView. builder 

itemCount: data.length, 
itemBuilder: (context, 
final user = data[index].data() as 
Map<String, 

return ListTile( 
title: Text(user 

subtitle: Text 


index) 


namic>; 


package: Tiutter/._/wadgets/bandin; 


tter/../widgets/binding.dart 


RawReceivePortImp] 


“a 


A&G § AA oza 


11:53 


TE) Ke cat) SSM 


Data pindahkan kedalam if 


A 5. Get Data.mp4 - VLC media player — x 


Media Playback Audio Video Subtitle Tools View Help 


Run Terminal Help sers. dart - fire 


« & users screendart X 


FIREBASE APP 
MM dart to 


body: Futur der<QuerySnapshot<Object?>> 
future: users.getUsers(), 
builder: (context, snapshot) 


(snapshot .hasData) { 
var data = snapshot.data! .docs; 
etu ListView.builder 
itemCount: data.length, 
itemBuilde: context, index) { 
final user = data[index].data() as 


title: T 
subtitle: 


OUTLINE 
TIMELINE 
DEPENDENCIES 


12:09 14:09 


WE) Ke cai) Sox | 
Ini sudah berhasil mengunkan hasData maka data sudah ada kalau belum maka dia 
loading 

HasData ganti conectionState done 


A 5. Get Data.mp4 - VLC media player — x 


Media Playback Audio Video Subtitle Tools View Help 


& users screen.dart X 


future: users.getUsers 
builder: (context, snapshot) 


(snapshot.connectionState == 
tionState.done) { 
data snapshot.data! .docs; 
ListView.builder 
itemCount: data. length, 
itemBuilder: (context, index) { 
final user = data[index].data() as 
tring, ynamic>; 
turn ListTile( 
title: T 
subtitle: 


DEBUG CONSOLE 


OUTLINE 
TIMELINE 


DEPENDENCIES 


AGBEMAY OB | 
12:50 14:09 


I) mp lw Bs 0 
Seharusnya sudah berhasil sudah buat perbadingan 

Kita sudah menget dia hanya sekali dijalankan 

Coba ganti datanya 


A 5. Get Data.mp4 - VLC media player — x 
Media Playback Audio Video Subtitle Tools View Help 


© Œ Q consolefirebase.google.com t/myapp-firet tore/data/~2Fuser 2e2SNmrlWBZ2Vi * 2#O@: 


M Gmail © Q Maps @ INTRODUCTION- P.. EE] Situs tanpa judul @ Lean 20 Animati 
Firebase myapp-firebase v Cloud Firestore Gotodocs @ DO 
Project Overview 2 
ft 
Build 
3 Lu) =: B 
= Authentication 
App Check + Start collection + Add document + Start collect 
users > 4 4 Add field 


Realtime Database 


Extensions SB2e2SNmrLWBZ2VFigzf > 
Storage 
) Functions 
2 “KO Bogo, P 


1) palapa Tim ss MEP.) 
Ketika ubah data terupdate maka dia restart dahulu 

Ini hanya mengunakan get hanya sekali widget nya dijalankan 

Kemudian jalankan secara real time dia mematau datanya jika datanya berubah 
maka akan build kembali 


Untuk get sampai sini 
Berikutnya membahas realtime 


